<template>
  <div class="message">
    <div class="contactItem"
         v-for="item in historySessionList"
         @dblclick="handleMessageItemDblclick(item)"
         :key="item.relationuserip">
      <avatar :src="item.tx"
              :online="item.zt==='online'"
              @mouseout="handleAvatarMouseleave"
              @mouseover="handleAvatarMouseover(item.relationuserip)">
      </avatar>
      <div class="message_content">
        <div class="xm-time">
          <div class="xm">{{item.xm}}({{item.dnm}})</div>
          <div class="time">{{getTime(item.createtime)}}</div>
          <!--          <div class="time">9999-99-99</div>-->
        </div>
        <div class="msg-unreadcount">
          <div class="msg" v-html="getMsgText(item.msg)"></div>
          <div class="unreadcount"
               :unreadCount="unreadCount[item.relationuserip]>99?`99+`:unreadCount[item.relationuserip]"
               v-show="unreadCount[item.relationuserip]"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapState} from 'vuex'
  import Avatar from './Avatar'

  const commonUtil = require('../util/commonUtil')

  export default {
    name: 'Message',
    data () {
      return {}
    },
    created () {
      // this.$store.dispatch('getSeesionList')
    },
    computed: {
      ...mapState({
        unreadCount: state => state.unreadCount
      }),
      ...mapGetters(['getUserInfoByUserip', 'historySessionList'])
    },
    components: {
      Avatar
    },
    methods: {
      getMsgText (msg) {
        return commonUtil.getMsgText(msg)
      },
      handleAvatarMouseleave () {
        myStorage.setItem('communication', {
          action: 'hideInfoMiniWindow'
        })
      },
      handleAvatarMouseover (userip) {
        let ev = event
        let win = this.$electron.remote.getCurrentWindow()
        let bounds = win.getBounds()
        myStorage.setItem('communication', {
          action: 'showInfoMiniWindow',
          data: {
            config: {
              x: bounds.x - 294 - 10,
              y: bounds.y + ev.target.offsetTop,
              width: 294,
              height: 152,
              router: '/infoboxmini'
            },
            data: userip
          }
        })
      },
      getTime (time) {
        return commonUtil.getTimeStr(time)
      },
      handleMessageItemDblclick (item) {
        if (!item.relationuserip) return
        this.$store.dispatch('addSessionList', item.relationuserip)
        // myStorage.setItem('communication', {action: 'addSession', data: item.relationuserip})
      }
    }
  }
</script>

<style scoped lang="scss">
  .message {
    width: 100%;
    max-height: 99%;

    .contactItem {
      /*height: 40px;*/
      box-sizing: border-box;
      padding: 10px 5px;
      font-size: 0;

      /*& > div {*/
      /*  float: left;*/
      /*}*/

      &:hover {
        background: rgba(0, 0, 0, .1);
      }

      .message_content {
        display: inline-block;
        height: 100%;
        width: calc(100% - 40px);
        vertical-align: top;
        box-sizing: border-box;
        padding-left: 10px;
        /*margin-left: 10px;*/

        .xm-time {
          height: 20px;
          position: relative;

          .xm {
            font-size: 14px;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: calc(100% - 70px);
          }

          .time {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 14px;
            width: 70px;
            text-align: center;
          }
        }

        .msg-unreadcount {
          height: 20px;
          overflow: hidden;
          position: relative;

          .msg {
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: calc(100% - 70px);
            vertical-align: top;
          }

          .unreadcount {
            font-size: 14px;
            position: absolute;
            top: 0;
            right: 0;
            width: 70px;
            text-align: center;

            &::after {
              content: attr(unreadCount);
              display: inline-block;
              height: 16px;
              /*width: 16px;*/
              min-width: 12px;
              line-height: 16px;
              color: #fff;
              padding: 0 2px;
              border-radius: 8px;
              background-color: red;
            }
          }
        }

        /*div {*/
        /*  width: 100%;*/
        /*  height: 20px;*/
        /*  line-height: 20px;*/
        /*  overflow: hidden;*/
        /*  text-overflow: ellipsis;*/
        /*  white-space: nowrap;*/
        /*}*/

        /*.messageItem_name {*/
        /*  font-weight: bold;*/
        /*  font-size: 14px;*/
        /*}*/
      }

      /*.message_time {*/
      /*  width: 90px;*/
      /*  height: 40px;*/
      /*  text-align: center;*/
      /*  line-height: 40px;*/
      /*}*/

      /*.message_unreadCount {*/
      /*  background-color: #54c3cc;*/
      /*}*/
    }
  }
</style>
